<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>xUI doc</title>
	</head>
	<body class="x-loading">
		<div id="app">
			<style>
				.item1,
				.item2,
				.item3 {
					position: absolute;
					background-color: transparent;
					left: calc(50% - (var(--size) / 2));
					top: calc(50% - (var(--size) / 2));
					height: var(--size);
					width: var(--size);
					border-radius: 50%;
				}

				.loader .item1 {
					--size: 90px;
					animation: size1_1 2.5s infinite alternate;
					z-index: 1;
				}

				.loader .item2 {
					--size: 60px;
					animation: size1_2 2.5s infinite alternate;
					z-index: 2;
				}

				.loader .item3 {
					--size: 30px;
					animation: size1_3 2.5s infinite alternate;
					z-index: 3;
				}

				@keyframes size1_1 {
					0%,
					10% {
						transform: scale(0);
					}

					100% {
						transform: scale(1);
						box-shadow:
							8px 8px 14px #c5c5c5,
							-8px -8px 14px #ffffff;
					}
				}

				@keyframes size1_2 {
					0%,
					40% {
						transform: scale(0);
					}

					100% {
						transform: scale(1);
						box-shadow:
							8px 8px 14px #c5c5c5,
							-8px -8px 14px #ffffff;
					}
				}

				@keyframes size1_3 {
					0%,
					70% {
						transform: scale(0);
					}

					100% {
						transform: scale(1);
						box-shadow:
							8px 8px 14px #c5c5c5,
							-8px -8px 14px #ffffff;
					}
				}
			</style>
			<div class="loader">
				<div class="item1"></div>
				<div class="item2"></div>
				<div class="item3"></div>
			</div>
		</div>
		<script
			src="./common/libs/seed.js"
			id="src-root"
			data-app-entry-name="entry.use.babel"
			data-app-use-babel="true"
			data-app-version="1739266418386"
			data-app-name="doc"></script>
	</body>
</html>
